<template>
	<tm-app class="app relative">
		<view>
		<view class="flex flex-center">
			<tm-avatar :font-size="200" :round="20" img="/static/logo.png"/>
		</view>
		 <tm-sheet :padding="[0]" _style="background-color: rgba(255,255,255,1);margin-top:120rpx;" :round="8" :shadow="20">
			 <tm-form ref="form" v-model="loginform" :label-width="190" transprent>
				 <tm-form-item field="phone" required :rules="rules.phone">
					 <tm-input v-model="loginform.phone" :fontSize="34" transprent showClear placeholder="请输入手机号">
						 <template v-slot:left>
							 <tm-icon name="tmicon-account" :fontSize="40" class="pr-16"></tm-icon>
						 </template>
					 </tm-input>
				 </tm-form-item>
				 <tm-form-item field="authCode" required>
					 <tm-input v-model="loginform.authCode" :fontSize="34" transprent  showClear placeholder="请输入验证码">
						 <template v-slot:left>
							 <tm-icon name="tmicon-lock" :fontSize="40" class="pr-16"></tm-icon>
						 </template>
						 <template v-slot:right>
							 <tm-button :disabled="btndisabled" :width="198" :height="62" :label="label" @click="getCode()" :fontSize="32" disabledColor="#c9cdd4" color="#FADC19" style="color:white !important"/>
						 </template>
					 </tm-input>
				 </tm-form-item>
				 <tm-form-item :border="false" :margin="[12,50]">
					 <tm-button @click="login()" form-type="submit" label="登录" block :round="15" :padding="[0,45]" :fontSize="36" color="#FADC19"/>
				 </tm-form-item>
			 </tm-form>
		 </tm-sheet>
		 </view>
		 
		 
		 <view class="absolute fulled flex" style="bottom:30rpx;justify-content: center;" >
		 		<tm-checkbox v-model="agreemFlag" :round="10" color="#23C343" value="banner" :size="32" >
		 			<template v-slot:default="{checked}">
		 				<view class="flex flex-row">
		 					<tm-text label="我已经阅读并同意"></tm-text>
		 					<view>
		 						<tm-text color="primary" label="《用户服务协议》"
		 							@click="goto('/pages/protocol/service/service')"></tm-text>
		 					</view>
		 					<tm-text label="和"></tm-text>
		 					<view>
		 						<tm-text color="primary" label="《隐私政策》"
		 							@click="goto('/pages/protocol/privacy/privacy')"></tm-text>
		 					</view>
		 				</view>
		 			</template>
		 		</tm-checkbox>
		 </view>
		 
		 <tm-notification placement="top" :offset="[32,90]" ref="msg"/>
	</tm-app>
</template>

<script setup lang="ts">
	import {ref,nextTick} from 'vue'
	import {getLoginCode,accountLogin} from './resource/http'
	import tmNotification from '@/tmui/components/tm-notification/tm-notification.vue'

	const msg = ref<InstanceType<typeof tmNotification> | null>(null)

	const form = ref(null)
	
	const agreemFlag = ref(false)

	const loginform = ref({
		phone:'',
		authCode:'',
		openId:''
	})

	const phoneRegex = /^1[3456789]\d{9}$/

	const rules={
		phone:[
			{ required: true, message: '请填写手机号'},
			{ required: true, message: '请填写正确格式手机号',validator:(val) => phoneRegex.test(val)},
		],
	}

	const label = ref('获取验证码')
	const btndisabled = ref(false)


const getCode = async ()=>{
	const res = form.value.validate()

	// if(res.result[0].validator){
		const phone = {phone:loginform.value.phone}
		try{
			const data = await getLoginCode(phone)
			if(data.code===0){
				let time = 59
				btndisabled.value = true
				label.value = time+'秒后重试'
				const timer = setInterval(()=>{
					time--
					if(time===0){
						label.value = '获取验证码'
						btndisabled.value = false
						clearInterval(timer)
					}else{
						label.value = time+'秒后重试'
					}
				},1000)
			}else{
				nextTick(() => {
						msg.value?.show({ label: data.message,color:'#FF837F'})
					})
			}
		}catch(err){
			console.log(err)
			msg.value?.show({ label: err,color:'#FF837F'})

		}
}

const login = async () => {
	if(agreemFlag.value){
		loginform.value.openId = uni.getStorageSync('openId')
		console.log(loginform.value.openId,'openId');
		const data = await accountLogin(loginform.value)
		
		if(data.code===0){
			uni.setStorage({
				key: 'accessToken',
				data: 'Bearer ' + data.data.accessToken,
			}).then(res=>{
				return uni.setStorage({
				key:'refreshToken',
				data: 'Bearer '+data.data.refreshToken
			  })
			}).then(()=>{
				uni.redirectTo({
					url:"/pages/index/index"
				})
			})
		}else{
			nextTick(()=>{
				msg.value.show({label:data.message,color:'#FF837F'})
			})
		}
	}else{
		uni.showToast({
			title:'请阅读并勾选同意《服务条款》和《隐私协议》',
			icon:'none'
		})
	}
	
}


const goto = (url) => {
		uni.navigateTo({
			url: url
		})
	}
</script>

<style>
.app{
	background-image: url('/static/login-bg.webp') !important;
	/* background-size:contain; */
	background-repeat: no-repeat !important;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}
</style>
